<template>
  <div
    class="download"
    v-if="isEndAjax"
    v-loading="pageLoading"
    :element-loading-text="$t('caseorder.anli123')"
  >
    <div>
      <el-row>
        <div class="detail_header">
          <div>
            <span class="title">{{ $t('caseorder.yulan.yulan79') }}</span>
            <span class="sub_title">{{ $t('caseorder.anli119') }}</span>
          </div>
          <div v-show="fileListArr.length > 0 || temporaryListArr.length > 0">
            <el-checkbox v-model="isSimultaneouslyDownload">{{
              $t('caseorder.anli122')
            }}</el-checkbox>
          </div>
        </div>
      </el-row>

      <div v-if="!isOverdue">
        <div v-for="(item, index) in fileListArr" :key="index" class="file">
          <div class="file_left">
            <img src="@/assets/img/order_file.png" alt="" />
            <div class="file_left_info">
              <span>{{ item.fileName }}</span>
              <span>{{ $t('caseorder.yulan.yulan80') }}</span>
            </div>
          </div>
          <div class="file_right">
            <img
              v-show="isShowLoad"
              src="@/assets/img/file_noChange.png"
              alt=""
              @click="convertFile(item)"
            />
            <img src="@/assets/img/file_download.png" alt="" @click="download(item, true)" />
          </div>
        </div>
      </div>
      <div
        v-else-if="isOverdue"
        class="not_data_box"
        v-loading="loading"
        :element-loading-text="loadingText"
      >
        <img style="width: 250px; height: 155px" src="@/assets/img/home/zanwushuju.png" />
        <div style="letter-spacing: 1px; margin-top: -20px">
          <span class="overdueText">{{ $t('add.add072') }}</span>
          <span class="loadBtn" @click="toLoadModel()">{{ $t('add.add067') }}</span>
        </div>
      </div>

      <div v-if="temporaryListArr && temporaryListArr.length > 0">
        <el-row>
          <div class="detail_header" style="justify-content: start">
            <span class="title">{{ $t('caseorder.anli117') }}</span>
            <span class="sub_title">{{ $t('caseorder.anli118') }}</span>
          </div>
        </el-row>
        <div>
          <div v-for="(item, index) in temporaryListArr" :key="index" class="file">
            <div class="file_left">
              <img src="@/assets/img/order_file.png" alt="" />
              <div class="file_left_info">
                <span>{{ item.fileName }}</span>
                <!-- 成功的时候 -->
                <span v-show="!item.convertLoading">{{ getFileMode(item.fileName) }}</span>
                <!-- 转换中 -->
                <span v-show="item.convertLoading">{{ $t('caseorder.anli120') }}</span>
              </div>
            </div>
            <div class="file_right" v-if="!item.convertLoading">
              <!-- :style="{
                  'margin-right': fcDownloadLoading ? '20px' : '0px',
                }" -->
              <div v-loading="item.loading">
                <img src="@/assets/img/file_download.png" alt="" @click="download(item)" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <FileChange ref="fileChange" />

    <el-dialog
      :title="$t('caseorder.anli105')"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <p style="margin-bottom: 15px">{{ $t('caseorder.anli106') }}</p>
      <el-select
        multiple
        v-model="selectFormats"
        :placeholder="$t('caseorder.anli107')"
        style="width: 100%"
      >
        <el-option
          v-for="item in formatList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button v-loading="isConvertLoading" @click="dialogVisible = false">取 消</el-button>
        <el-button v-loading="isConvertLoading" type="primary" @click="sureConver(true)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- pdf导出确认弹框 -->
    <el-dialog
      :title="$t('caseorder.yulan.yulan127')"
      :visible.sync="showPdf"
      width="60%"
      :close-on-click-modal="false"
    >
      <div ref="pdf" class="pdf_box">
        <detailPdf
          :dataObj="dataObj"
          :imgUrl="imgUrl"
          :mouthImgs="mouthImgs"
          :loading="pdfLoading"
        ></detailPdf>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showPdf = false">{{ $t('caseorder.anli36') }}</el-button>
        <el-button type="primary" @click="handleExport" :loading="pdfLoading">{{
          $t('caseorder.anli70')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const Base64 = require('js-base64').Base64;
import FileChange from '@/components/filechange'; //
import OrderInfo from '@/views/order/common/OrderInfo';
import Screenshot from '@/views/order/common/Screenshot';
import basicInfo from '@/views/order/common/basicInfo';
import detailPdf from '@/views/order/common/detailPdf';
import { downloadPDFA4 } from '@/utils/pdf.js';
import { downloadFile, isOldVersionBool } from '@/utils/index';

export default {
  // 下载
  name: 'BLZMasterDownload',
  components: {
    FileChange,
    OrderInfo,
    Screenshot,
    basicInfo,
    detailPdf,
  },
  data() {
    return {
      pageLoading: false,
      isSimultaneouslyDownload: false,
      designListArr: [],
      // 压缩包列表
      fileListArr: [],
      // 临时压缩包列表
      temporaryListArr: [],
      // 控制当前fc转换是否转换完成
      isConvertLoading: false,

      // 控制重新生成的loading
      loading: false,
      loadingText: this.$t('add.add068'),
      isOverdue: true,
      // 控制接口是否请求完
      isEndAjax: false,
      isPrimary: true,
      // 控制转换窗口是否出现
      dialogVisible: false,
      isShowLoad: false,
      currFileData: {},
      selectFormats: [],
      // 目标格式列表
      formatList: [
        {
          label: this.$t('caseorder.anli108'),
          value: 'stl-原始订单',
        },
        {
          label: this.$t('caseorder.anli109'),
          value: 'ply-原始订单',
        },
        {
          label: this.$t('caseorder.anli110'),
          value: 'obj-原始订单',
        },
        {
          label: this.$t('caseorder.anli111'),
          value: 'stl-3shape',
        },
        {
          label: this.$t('caseorder.anli112'),
          value: 'ply-3shape',
        },
        {
          label: this.$t('caseorder.anli113'),
          value: 'obj-3shape',
        },
        {
          label: this.$t('caseorder.anli114'),
          value: 'stl-exocad',
        },
        {
          label: this.$t('caseorder.anli115'),
          value: 'ply-exocad',
        },
        {
          label: this.$t('caseorder.anli116'),
          value: 'obj-exocad',
        },
      ],
      // 保存当前
      // 控制导出pdf弹框的显示与隐藏
      showPdf: false,
      notes: '',
      pdfLoading: false,

      isExamine: '',
      currRow: {},
      user_organizedType: '',
    };
  },
  props: {
    id: Number,
    patientName: String,
    createDate: String,
    dataObj: Object,
    imgUrl: String,
    mouthImgs: Array,
  },
  watch: {
    dataObj: {
      handler(newValue, oldValue) {},
      deep: true,
    },
  },
  // props: ['fileListArr'],
  created() {
    this.user_organizedType = window.localStorage.getItem('user_organizedType');
    // this.getSelectDesignList()
    this.getOrderDownload('1');

    // 获取是否能转换
    this.getIsConvert();
    // 查询列表情况
    this.queryFileState();

    this.sureConver(false);
  },
  mounted() {
    this.isExamine = this.$route.query.isExamine;
  },

  methods: {
    fileChangeHandle() {
      this.$refs.fileChange.dialogShow = true;
    },
    convertFile(data) {
      // fileName
      this.currFileData = data;
      this.convertControl();
      this.selectFormats = [];

      this.dialogVisible = true;
    },
    // 定义一个方法控制不同类型文件可以转换不同的格式
    convertControl() {
      this.formatList.forEach((item) => {
        item['disabled'] = false;
      });
      if (this.currFileData.fileName.indexOf('_3rd.zip') !== -1) {
        this.formatList.forEach((item) => {
          if (item.value.indexOf('3shape') === -1) {
            item['disabled'] = true;
          }
        });
      } else {
        this.formatList.forEach((item) => {
          if (item.value.indexOf('3shape') !== -1) {
            item['disabled'] = true;
          }
        });
      }
      this.$forceUpdate();
    },
    sureConver(bool) {
      if (this.isConvertLoading) {
        this.$message.error(this.$t('caseorder.anli142'));
        return false;
      }

      this.showTempList();
      if (bool) {
        // 调用记录接口
        this.recordConversion();
      }
    },
    recordConversion() {
      this.dialogVisible = false;
      let deptId = window.localStorage.getItem('user_jg_id');
      this.isConvertLoading = true;
      let params = {
        orderId: this.id,
        deptId,
        sourceZip: this.currFileData.url,
        types: [],
      };

      for (let item of this.selectFormats) {
        let formatType = item.split('-')[0];
        let orderType = item.split('-')[1];
        params.types.push({
          type: formatType,
          forType: orderType,
        });
      }
      this.$http({
        url: this.currFileData.fcAddress,
        method: 'post',
        redirect: 'follow',
        withCredentials: false,
        headers: {
          'User-Agent':
            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
          'Content-Type': 'application/json',
        },
        data: params,
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          this.isConvertLoading = false;
          this.$message({
            message: this.$t('caseorder.anli137'),
            type: 'success',
          });
          this.temporaryListArr.forEach((item) => {
            item.convertLoading = false;
          });
          this.$forceUpdate();
          // 查询列表情况
          this.queryFileState();
        }
      });
    },
    queryFileState() {
      let deptId = window.localStorage.getItem('user_jg_id');
      this.$http({
        url: '/orderDownload/orderTransformInfo',
        method: 'get',
        params: {
          orderId: this.$route.query.id,
          deptId,
        },
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (res.data) {
              this.temporaryListArr = res.data;
              this.temporaryListArr.forEach((item) => {
                if (item.fileStatus === '1') {
                  item.fileStatus = '0';
                }
              });

              // this.toConversion();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    showTempList() {
      for (let item of this.selectFormats) {
        let id = this.getTepmId();
        let needData = this.formatList.filter((f) => f.value === item)[0];
        let fileName = `${this.patientName ? this.patientName : '-'}_${this.createDate}_${
          id ? id : '-'
        }_${needData.label}.zip`;

        this.temporaryListArr.push({
          fileName: fileName,
          convertLoading: true,
        });
      }
    },
    // 封装一个方法来组织id
    getTepmId() {
      let id;
      const match = this.currFileData.fileName.match(/^(.*?)(\.[^.]+)$/);
      if (match) {
        const beforeLastStr = match[1];
        // 找到最后一个下划线的位置
        const lastIndex = beforeLastStr.lastIndexOf('_');
        if (lastIndex !== -1) {
          // 获取下划线右边的字符串
          const afterLastUnderscore = beforeLastStr.slice(lastIndex + 1);
          if (afterLastUnderscore === '3rd') {
            // 3rd文件类型
            // 找到倒数第一个下划线的位置
            const lastUnderscoreIndex = this.currFileData.fileName.lastIndexOf('_');
            // 如果找到了倒数第一个下划线，则继续寻找倒数第二个
            if (lastUnderscoreIndex !== -1) {
              // 从字符串的开头开始寻找，但在已知的最后一个下划线之前停止
              const secondLastUnderscoreIndex = this.currFileData.fileName
                .substring(0, lastUnderscoreIndex)
                .lastIndexOf('_');
              if (secondLastUnderscoreIndex !== -1) {
                // 注意，由于我们是从字符串的开头开始找的，我们需要加上原始字符串的长度来获取正确的索引
                const valueBetweenUnderscores = this.currFileData.fileName.substring(
                  secondLastUnderscoreIndex + 1,
                  lastUnderscoreIndex,
                );
                id = valueBetweenUnderscores;
              } else {
                console.log('There is no second to last underscore in the string.');
              }
            } else {
              console.log('There is no last underscore in the string.');
            }
          } else {
            // 正常类型
            // 找到最后一个下划线的位置
            const lastUnderscoreIndex = this.currFileData.fileName.lastIndexOf('_');

            // 找到最后一个点的位置
            const lastDotIndex = this.currFileData.fileName.lastIndexOf('.');

            // 确保下划线和点都存在，并且下划线在点之前
            if (
              lastUnderscoreIndex !== -1 &&
              lastDotIndex !== -1 &&
              lastUnderscoreIndex < lastDotIndex
            ) {
              // 提取下划线后面到点前面的子字符串
              const valueBetween = this.currFileData.fileName.substring(
                lastUnderscoreIndex + 1,
                lastDotIndex,
              );
              id = valueBetween;
            } else {
              console.log('Invalid string format or characters not found.');
            }
          }
        } else {
          console.log('No underscore found in the string.');
        }
      }
      return id;
    },
    async toReconversion(item, index) {
      item['isReconversion'] = true;
      this.$forceUpdate();
      let res = await this.$http({
        url: '/orderDownload/formatConversion',
        method: 'get',
        params: {
          fileName: item.fileName,
          fileUrl: item.fileUrl,
          formatType: item.formatType,
          orderType: item.orderType,
          orderId: item.orderId,
          transformId: item.id,
        },
      });
      if (res.data.code !== 0) {
        item['isReconversion'] = false;
        item.fileStatus = '-1';
        this.$set(this.temporaryListArr, index, item);
        this.$forceUpdate();

        // return this.$message.error(res.data.msg);
      } else {
        let index = this.temporaryListArr.findIndex((tempItem) => tempItem.id === item.id);
        if (index !== -1) {
          // 更新 temporaryListArr 中的对应 item
          this.$set(this.temporaryListArr, index, { ...res.data.data, isReconversion: false });
        }

        this.$forceUpdate();
      }
    },
    async toConversion() {
      for (let index = 0; index < this.temporaryListArr.length; index++) {
        let item = this.temporaryListArr[index];
        if (item.fileStatus === '1' || item.fileStatus === '0') {
          this.dialogVisible = false;
          // 只有在待转换才能转
          // let id = this.getTepmId();
          try {
            let params = {
              fileName: item.fileName,
              fileUrl: item.fileUrl,
              formatType: item.formatType,
              orderType: item.orderType,
              orderId: item.orderId,
              transformId: item.id,
            };
            let res = await this.$http({
              url: '/orderDownload/formatConversion',
              method: 'get',
              params: params,
            });
            if (res.data.code !== 0) {
              item.fileStatus = '-1';
              this.$set(this.temporaryListArr, index, item);
              this.$forceUpdate();

              // this.toConversion();
              // return this.$message.error(res.data.msg);
            } else {
              // 直接更新 temporaryListArr 中的元素
              this.$set(this.temporaryListArr, index, res.data.data);

              this.$forceUpdate();

              if (
                this.temporaryListArr[index] ===
                this.temporaryListArr[this.temporaryListArr.length - 1]
              ) {
                this.getOrderDownload('2');
                this.$emit('getIsOverdue', this.isOverdue);
              }
            }
          } catch (error) {
            // 捕获每个请求的错误并继续执行其他请求
            console.error(`Request failed for item ${item.id}`, error);
            // this.toConversion();
            // 可以选择显示一个错误消息，或者记录错误，但不会中断后续请求
          }
        }
      }
    },

    getFileMode(url) {
      if (url) {
        let _index1 = url.lastIndexOf('_');
        let _index2 = url.lastIndexOf('.');
        // 使用正则表达式匹配最后一个_到.之间的字符
        return url.substring(_index1 + 1, _index2);
      }
    },
    download(row, isPrimary) {
      this.isPrimary = isPrimary;
      this.currRow = row;

      if (!this.isSimultaneouslyDownload) {
        if (isPrimary) {
          window.open(row.url);
        } else {
          row['loading'] = true;
          this.$forceUpdate();
          this.downloadFcFile();
        }
        return false;
      }

      this.$forceUpdate();
      let formData = new FormData();
      formData.append('orderId', row.orderId);
      this.showPdf = true;
      if (isPrimary) {
        // 上面的下载
        // this.$http
        //   .post('/orderDownload/findDetailPdf', formData)
        //   .then(({ data: res }) => {
        //     if (res.code !== 0) {
        //       return this.$message.error(res.msg);
        //     } else {
        //       if (res.data) {
        //         // 有pdf直接下
        //         let formData = new FormData();
        //         if (isPrimary) {
        //           formData.append('zipUrl', Base64.encode(row.url));
        //         } else {
        //           formData.append('zipUrl', Base64.encode(row.downloadUrl));
        //         }
        //         formData.append('orderId', row.orderId);
        //         formData.append('fileName', row.fileName);
        //         this.pageLoading = true;
        //         this.$http
        //           .post('/orderDownload/downloadOrderInfoReport', formData)
        //           .then(({ data: res }) => {
        //             if (res.code !== 0) {
        //               return this.$message.error(res.msg);
        //             } else {
        //               this.pdfLoading = false;
        //               row['loading'] = false;
        //               this.$forceUpdate();
        //               this.pageLoading = false;
        //               this.showPdf = false;
        //               downloadFile(res.data);
        //               this.$message.success(this.$t('caseorder.anli71'));
        //             }
        //           })
        //           .catch((err) => {
        //             console.log('err', err);
        //           });
        //       } else {
        //         this.currRow = row;
        //       }
        //     }
        //   })
        //   .catch((err) => {
        //     console.log('err', err);
        //   });
      }
    },
    // 用fc去下载文件
    downloadFcFile(file) {
     
      let formData = new FormData();
      formData.append('type', this.currRow.formatType);
      formData.append('forType', this.currRow.orderType);
      if (file) {
        let fileName =
          Base64.encode(
            `${this.dataObj.order.patientName ? this.dataObj.order.patientName : '-'}_${
              this.dataObj.order.orderCreateTime
            }_${this.$t('caseorder.anli121')}`,
          ) + '.pdf';

        // let fileName ='5paw5bu65paH5pys5paH5qGj.pdf';

        // let fileName = `${this.dataObj.order.patientName ? this.dataObj.order.patientName : '-'}_${
        //   this.dataObj.order.orderCreateTime
        // }_${this.$t('caseorder.anli121')}.pdf`;
        formData.append('extfile', file, fileName);
      }
      // 获取zip资源路径
      this.$http({
        url: '/orderDownload/findOrderZipUrl',
        method: 'get',
        params: {
          orderType: this.currRow.orderType,
          orderId: this.id,
        },
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          formData.append('sourceZip', res.data);
          formData.append('urlEncode', '1');
          // let params = {
          //   sourceZip: res.data,
          //   type: this.currRow.formatType,
          //   forType: this.currRow.orderType
          // };
          https://blzoss-china.oss-cn-beijing.aliyuncs.com/test/order-download/2025/04/08/123456/%25E7%259B%25B4%25E4%25BC%25A0oss%25E6%25B5%258B%25E8%25AF%2595_stl%2528for+%25E5%258E%259F%25E5%25A7%258B%25E8%25AE%25A2%25E5%258D%2595%2529.zip
          // 下面的是通过fc下载
          this.$http({
            url: this.currRow.downloadUrl,
            method: 'post',
            redirect: 'follow',
            withCredentials: false,
            headers: {
              'User-Agent':
                'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
              'Content-Type': 'application/json',
            },
            // responseType: 'blob', // ⭐ 必须加上这个
            data: formData,
            // data: params,
          })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                downloadFile(res.data, '', false);
                this.$message.success(this.$t('caseorder.anli71'));
                this.currRow['loading'] = false;
                this.showPdf = false;
                this.pdfLoading = false;
                this.$forceUpdate();
              }
            })
            .catch((err) => {
              console.log('err', err);
              this.currRow['loading'] = false;
              this.$forceUpdate();
            });
        }
      });
    },
    handleExport() {
    
   
      this.$nextTick(() => {
        this.pdfLoading = true;
        downloadPDFA4(this.$refs.pdf, this.dataObj, this.$t('caseorder.anli121'), false, (file) => {
          if (this.isPrimary) {
            let formData = new FormData();
            formData.append('zipUrl', Base64.encode(this.currRow.url));
            formData.append('orderId', this.currRow.orderId);
            formData.append(
              'file',
              file,
              `${this.dataObj.order.patientName ? this.dataObj.order.patientName : '-'}_${
                this.dataObj.order.orderCreateTime
              }_${this.$t('caseorder.anli121')}.pdf`,
            );
            formData.append('fileName', this.currRow.fileName);

            this.$http
              .post('/orderDownload/downloadOrderInfoReport', formData)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.pdfLoading = false;

                  this.showPdf = false;

                  downloadFile(res.data);
                  this.$message.success(this.$t('caseorder.anli71'));
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          } else {
            this.downloadFcFile(file);
          }
        });
      });
    },

    downloadIamge(imgsrc, name) {
      // 下载图片地址和图片名

      var image = new Image();

      // 解决跨域 Canvas 污染问题
      image.crossOrigin = 'anonymous';
      // image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据

        var a = document.createElement('a'); // 生成一个a元素
        var event = new MouseEvent('click'); // 创建一个单击事件
        a.download = name || 'photo'; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      // image.setAttribute("crossOrigin", "anonymous");
      image.src = imgsrc;
    },

    getSelectDesignList() {
      this.$http
        .post('/order/selectDesignList', { orderId: this.$route.query.id })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.designListArr = [];
            this.designListArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    processingColdData(fileStatusModel, type) {
      if (fileStatusModel === 1) {
        this.isOverdue = false;
      } else {
        this.isOverdue = true;
      }
      if (type === '2') {
        this.$emit('getIsOverdue', this.isOverdue);
      }
    },
    getIsConvert() {
      this.$http({
        url: '/orderDownload/onlineFormatConversion',
        method: 'get',
        params: {
          orderId: this.$route.query.id,
        },
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.isShowLoad = res.data;
            this.$forceUpdate();
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    getOrderDownload(type) {
      this.$http
        .post(`/orderDownload/list?orderId=${this.$route.query.id}&fileType=1`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.fileListArr = res.data.filter((f) => f.deptId);

            this.processingColdData(res.data[0].fileStatus, type);
            this.isEndAjax = true;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    toLoadModel() {
      this.loading = true;
      this.$http
        .post('/dataConversion/coldDataToHotData2Cloud', {
          orderId: this.id,
          fileType: 1,
          platformType: 1,
        })
        .then(({ data: res }) => {
          this.loading = false;
          if (res.code !== 0) {
            this.$message({
              message: this.$t('caseorder.anli104'),
              type: 'warning',
            });
          } else {
          }
          this.getOrderDownload('2');
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.download {
  height: 100%;
  padding: 10px;
  .prompt_box {
    padding: 10px;
    background: #bfd4f5;
    margin-bottom: 10px;
  }

  .detail_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .title {
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      color: #003e67;
    }

    .sub_title {
      display: inline-block;
      position: relative;
      top: 5px;
      margin-left: 10px;
      font-size: 12px;
    }
  }

  .file {
    margin-bottom: 10px;
    background-color: #f5f5f5;
    padding: 10px 30px 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .file_left {
      display: flex;

      img {
        width: 22px;
        height: 30px;
      }

      .file_left_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 12px;

        span {
          font-size: 12px;
          font-weight: 500;
          line-height: 11px;
          color: #333333;
        }
      }
    }

    .file_right {
      display: flex;
      align-items: center;

      img {
        cursor: pointer;
        width: 16px;
        height: 16px;
      }

      img:nth-child(2) {
        margin-left: 20px;
      }

      .state_box {
        margin-left: 10px;
        margin-top: 3px;
      }

      .failed_box {
        margin-top: 5px;
        margin-right: 20px;
        color: #9c9c9c;
      }
    }
  }

  .not_data_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      display: inline-block;
    }

    .overdueText {
      margin-right: 10px;
    }

    .loadBtn {
      color: #409eff;
      cursor: pointer;
    }
  }
}

.pdf_box {
  width: 100%;
  padding: 15px;
}

.pdf_title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #003e67;
  margin-bottom: 15px;
}

.notes_content {
  margin-top: 15px;
  // margin-left: 35px;
}

::v-deep .el-loading-spinner {
  margin-top: -16px;
  left: -7px;
}

::v-deep .el-loading-spinner .circular {
  width: 30px;
  height: 30px;
}
</style>
